<template>
    <el-card class="box-card">
        <div class="searchInput">
            <el-input v-model="input" clearable placeholder="请输入搜索内容" @clear="query()" style="width:240px;">
            </el-input>
            <el-button @click="handleSearch" style="margin-left: 10px;">搜索</el-button>
            <el-button @click="HandleAddEvent" style="margin-left: 10px;">添加
            </el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" row-key="menuId" default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="roleId" label="角色Id">
            </el-table-column>
            <el-table-column prop="roleName" label="角色名称">
            </el-table-column>
            <el-table-column prop="remark" label="备注">
            </el-table-column>
            <el-table-column prop="menuName" label="权限名称">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-tag type="" effect="dark">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small" style="color:white">编辑
                        </el-button>
                    </el-tag>
                    <el-tag type="danger" effect="dark">
                        <el-button @click="handleDelete(scope.row)" type="text" size="small" style="color:white">删除
                        </el-button>
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>


        <!--编辑角色信息对话框-->
        <el-dialog title="编辑信息" :visible.sync="dialogEditFormVisible" width="28%">
            <el-form :model="editForm">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="editForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="editForm.remark"></el-input>
                </el-form-item>
                <el-form-item label="权限" :label-width="formLabelWidth">
                    <el-tree :data="editTreeData" default-expand-all show-checkbox node-key="menuId" :props="editProps"
                        @check="currentEditChecked">
                    </el-tree>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="editCancelHandle">取 消</el-button>
                <el-button type="primary" @click="editEnsureHandle">确 定</el-button>
            </div>
        </el-dialog>
        <!--添加角色对话框-->
        <el-dialog title="添加角色" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.roleName"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>
                <el-form-item label="权限" :label-width="formLabelWidth">
                    <el-tree :data="treedata" default-expand-all show-checkbox node-key="menuId" :props="defaultProps"
                        @check="currentChecked">
                    </el-tree>
                </el-form-item>
            </el-form>

            <!-- <div slot=" footer" class="dialog-footer">
                <el-button @click="addCancelHandle">取 消</el-button>
                <el-button type="primary" @click="addEnsureHandle">确 定</el-button>
            </div> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCancelHandle">取 消</el-button>
                <el-button type="primary" @click="addEnsureHandle">确 定</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            input: '',
            form: {
                roleName: '',
                remark: '',
                menuIds: [],
            },
            editForm: {
                roleName: '',
                remark: '',
                menuIds: [],
            },
            treedata: [],
            defaultProps: {
                children: 'children',
                label: 'menuName'
            },
            editTreeData:[],
            editProps:{
                children: 'children',
                label: 'menuName'
            },
            roleName: '',
            value: '',
            label: '',
            id: '',
            dialogFormVisible: false,
            dialogEditFormVisible: false,
            formLabelWidth: '120px'
        }
    },
    created() {
        this.query();
        this.queryMenus();
    },
    methods: {
        query() {
            fetch('http://localhost/role/list')
                .then(response => response.json())
                .then((data) => {
                    this.tableData = data.data;
                })
        },
        queryMenus() {
            fetch('http://localhost/menu/tree')
                .then(response => response.json())
                .then((data) => {
                    this.treedata = data.data;
                    this.editTreeData = data.data;
                    // console.log(data.data);
                })
        },
        queryById(menuId) {
            fetch('http://localhost/menu?id=' + menuId)
                .then(response => response.json())
                .then((data) => {
                    let childNode = { id: 0, label: '', children: '' };

                    childNode.children = data.data.children;
                    childNode.id = data.data.menuId;
                    childNode.label = data.data.menuName;
                    this.treedata.push(childNode);
                    console.log(childNode);
                })
        },
        handleEdit(row) {
            this.id = row.roleId;
            this.dialogEditFormVisible = !this.dialogEditFormVisible;
        },
        handleDelete(row) {
            fetch('http://localhost/role/' + row.roleId, {
                method: 'DELETE',
            })
                .then(result => {
                    if (result) {
                        for (let i = 0; i < this.tableData.length; i++) {
                            if (this.tableData[i].roleId == row.roleId) {
                                this.tableData.splice(i, 1);
                                break;
                            }
                        }
                    } else {
                        alert("删除失败");
                    }
                })
        },
        handleSearch() {
            // alert(this.input);
            if (this.input) {
                fetch('http://localhost/role/query?str=' + this.input)
                    .then(response => response.json())
                    .then((data) => {
                        this.tableData = data.data;
                    })
            }
        },
        HandleAddEvent() {
            this.dialogFormVisible = !this.dialogFormVisible;
        },
        //编辑用户信息 对话框
        editCancelHandle() {
            this.dialogEditFormVisible = false;
        },
        editEnsureHandle() {
            //get请求 通过id 获取角色名称
            fetch('http://localhost/role/update',{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    roleId:this.id,
                    roleName: this.editForm.roleName,
                    remark: this.editForm.remark,
                    menuIds: this.editForm.menuIds
                })
            })
                .then(response => response.json())
                .then((data) => {
                    this.query();
                    this.form.roleName = '';
                    this.form.remark = '';
                    console.log(data);
                })   
            this.dialogEditFormVisible = false;
        },
        currentChecked(nodeObj, SelectedObj) {
            // console.log(SelectedObj.checkedKeys)   // 这是选中的节点的key数组
            // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组  
            this.form.menuIds = SelectedObj.checkedKeys;
        },
        currentEditChecked(nodeObj, SelectedObj) {
            this.editForm.menuIds = SelectedObj.checkedKeys;
            console.log(this.editForm.menuIds);
        },
        //添加用户 对话框
        addCancelHandle() {
            this.dialogFormVisible = false;
        },
        addEnsureHandle() {
            fetch('http://localhost/role/insert', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    roleName: this.form.roleName,
                    remark: this.form.remark,
                    menuIds: this.form.menuIds
                })
            })
                .then((result) => {
                    this.query();
                    this.form.roleName = '';
                    this.form.remark = '';
                    console.log(result);
                })

            this.dialogFormVisible = false;
        }
    },
}
</script>

<style>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 480px;
}

.el-card {
    width: 90%;
    height: 98%;
    overflow: hidden;
    margin: 0 auto;
}

.searchInput {
    width: 420px;
    display: flex;
    left: 0;
}

.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>

